<template>
  <div class="server-loading">
    <div class="modal">
      <img src="~/assets/images/server-loading.gif" alt="" />
      <p class="tip" v-if="tip">{{ tip }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tip: String
  }
}
</script>

<style lang="less" scoped>
.server-loading {
  position: absolute;
  inset: 0;
  z-index: 9999;
  background: #fff;
  opacity: .95;
  .modal {
    width: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    img {
      width: 100%;
    }
    .tip {
      color: #333;
      font-weight: 500;
      font-size: 14px;
      margin-top: -80px;
      margin-left: 10px;
    }
  }
}
</style>
